<template>
  <q-page class="cc-admin row">
    <div class="col bg-white shadow-2 q-pa-md q-ma-sm">
      <q-table
        flat
        color="primary"
        class="cross_table"
        separator="cell"
        :columns="columns"
        :data="list"
        row-key="id"
        :pagination.sync="pagination"
        :visible-columns="group"
        @request="query"
        :rows-per-page-options="[10,20,50,100]"
        :loading="loading"
        selection="multiple"
        :selected.sync="selected"
      >
        <template v-slot:top>
          <div class="row no-wrap full-width">

            <!--<q-input clearable outlined dense placeholder="请输入关键字搜索" class="on-left"
              @input="query" debounce="500" v-model="key" >
              <template #append>
                <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                  <q-tooltip>搜索</q-tooltip>
                </q-btn>
              </template>
            </q-input>
            <q-input clearable outlined dense placeholder="请输入关键字搜索" class="on-left"
                     @input="query" debounce="500" v-model="key" >
              <template #append>
                <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                  <q-tooltip>搜索</q-tooltip>
                </q-btn>
              </template>
            </q-input>-->
            <div class="q-pa">
              <q-select  flat outlined v-model="status_model" :options="options" @input="onValueChange" />
            </div>

            <q-space />
            <div class="q-gutter-xs">
              <!--<q-btn icon="add" no-wrap color="primary" label="新建" @click="add" />-->
              <q-btn icon="mdi-home" no-wrap color="primary" label="返回服务商列表" @click="go_back" />
              <q-btn icon="mdi-home" no-wrap color="primary" label="返回普通用户列表" @click="go_back_2" />
              <q-btn icon="mdi-restore" no-wrap color="grey" label="刷新列表" @click="refresh" />
            </div>
          </div>
        </template>
        <template #body-cell-status="props">
          <q-td key="status" :props="props">{{getGoodsLabel(props.row.status) }}</q-td>
        </template>

        <template #body-cell-opt="props">
          <q-td :props="props" :auto-width="true">
            <q-btn flat round dense color="primary" icon="edit" @click="edit2(props.row,'goods')">
              <q-tooltip>编辑</q-tooltip>
            </q-btn>
            <btn-del label="商品管理" @confirm="del(props.row)" />
          </q-td>
        </template>
      </q-table>
      <q-item-section><div style="padding: 20px;">总人数：{{pagination.rowsNumber}}</div></q-item-section>
    </div>
    <confirm ref="confirmDialog" :msg="confirmMsg" @confirm="deleteBatch()" />
  </q-page>
</template>

<script>
import { IndexMixin } from 'boot/mixins';
import { getDictLabel } from 'boot/dictionary';
import confirm from 'components/confirm';
import { requiredTest } from 'boot/inputTest';
import catalogselect from 'components/catalogselect';
import viewcatalog from 'components/viewcatalog';

export default {
  name: 'MntDeploy',
  mixins: [IndexMixin],
  components: {
    confirm,
    catalogselect,
  },
  data() {
    return {
      form: {
        id:'',
        goods_no:'',
        seller_price:'',
        model_id:'',
        ad_img: '',
        name:'',
        sort: '99',
      },
      columns: [
        { name: 'user_id', align: 'center', label: '用户UID', field: 'user_id', },
        { name: 'name', align: 'center', label: '电话号码', field: 'mobile', },
        { name: 'status', align: 'center', label: '状态', field: 'status', },
        { name: 'true_name', align: 'center', label: '名称', field: 'true_name', },
        { name: 'time', align: 'center', label: '时间', field: 'time', },
      ],
      showQuery: true,
      headers: [{ name: 'Authorization', value: localStorage.Authorization }],
      uploadUrl: `${process.env.BASE_URL}/uploadfile`,
      imgUrl: `http://img.tel.gzzsu.com`,
      url: {
        list: '/fanslist',
        deleteBatch: '/client/deleteBatch',
        exportXlsUrl: '/client/exportXls',
        importExcelUrl: '/client/importExcel',
      },
      isEdit: 0,
      modelList: [],
      status_model: { label: "全部状态" , value: 0},
      options: [
        { label: "全部状态" , value: 0},
        { label: "已认证" , value: 2},
        { label: "未认证" , value: 1},
      ],
      searchForm: {
        status: '',
        uid: ''
      }
    };
  },
  methods: {
    queryParam() {   //查询前处理参数，使用这个
      this.uid = this.$route.query.id
      this.searchForm.uid = this.uid
    },
    go_back(){
      this.$router.push({
        path: '/memberserver/list'
      })
    },
    go_back_2(){
      this.$router.push({
        path: '/member/list'
      })
    },
    refresh(){
      this.query()
      // this.$axios.post('/fanslist', params).then((r) => {
      //   this.list = r.data;
      // });
    },
    requiredTest,
    onValueChange(val) {
      this.status_model = val;
      if(this.status_model.value == -1){
        delete this.searchForm.status
      }else{
        this.searchForm.status = this.status_model.value
      }
      this.query();

    },
    getGoodsLabel(status){
      if(status == 2) {
        return '已认证'
      }else{
        return '未认证'
      }
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.user_id = this.$route.query.id
    }


  },
};
</script>

<style lang="stylus"></style>
